<template>
    <div class="main">
        <el-main class="main-scrollbar">
            <el-scrollbar :style="style()">
                <router-view v-slot="{ Component }">
                    <transition :name="setting.setting.mainAnimation" mode="out-in">
                        <keep-alive :include="viewData.keepAlive">
                            <component :is="Component" :key="viewData.key" />
                        </keep-alive>
                    </transition>
                </router-view>
            </el-scrollbar>
        </el-main>
    </div>
</template>

<script lang="ts" setup>
import { useRoute } from 'vue-router'
import { reactive, watch } from 'vue'
import { useSetting } from '@/store'

const route = useRoute()
const setting = useSetting()

const viewData = reactive<{
    keepAlive: string[]
    key: string
}>({
    keepAlive: [],
    key: route.path,
})

const style = () => {
    return {
        height: 'calc(100vh - 60px - 40px - 50px)',
    }
}

// 记录需要缓存的组件
const addKeepAliveName = () => {}

watch(
    () => route.path,
    () => {
        viewData.key = route.path
        addKeepAliveName()
    },
)
</script>

<style scoped lang="scss">
.main {
    background-color: var(--pt-main-bg);
    width: 100%;
    height: 100%;
}
</style>
